<%--
  Created by IntelliJ IDEA.
  User: MyUser
  Date: 2025/4/11
  Time: 16:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 页面元信息 -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Bootstrap 5 CSS from jsDelivr CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Bootstrap图标库 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">

    <title>标签分类 - 广软课程论坛</title>

    <style>
        /* 自定义样式 */
        body {
            background-color: #f8f9fa;
        }
        .tag-header {
            background-color: white;
            padding: 2rem;
            border-radius: 10px;
            margin-bottom: 2rem;
            box-shadow: 0 0 10px rgba(0,0,0,0.05);
        }
        .tag-title {
            font-size: 2rem;
            margin-bottom: 1rem;
        }
        .tag-description {
            color: #6c757d;
            margin-bottom: 1.5rem;
        }
        .tag-info {
            display: flex;
            align-items: center;
            gap: 1.5rem;
        }
        .tag-info-item {
            display: flex;
            align-items: center;
            color: #6c757d;
        }
        .tag-info-item i {
            margin-right: 0.5rem;
        }
        .post-card {
            margin-bottom: 1.5rem;
            border: none;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.05);
            transition: transform 0.2s;
        }
        .post-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        .post-card a {
            text-decoration: none;
            color: inherit;
        }
        .post-card .card-body {
            padding: 1.5rem;
        }
        .post-card .card-title {
            display: flex;
            align-items: center;
            margin-bottom: 0.5rem;
        }
        .post-card h3 {
            font-size: 1.5rem;
            margin-bottom: 1rem;
            color: #212529;
        }
        .post-card p {
            color: #495057;
            margin-bottom: 1.5rem;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .avatar-sm {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            object-fit: cover;
        }
        .related-tags {
            background-color: white;
            padding: 1.5rem;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.05);
            margin-bottom: 2rem;
        }
        .tag-badge {
            display: inline-block;
            padding: 0.35em 0.65em;
            margin: 0.25rem;
            font-size: 0.875rem;
            font-weight: 500;
            border-radius: 20px;
            transition: all 0.2s;
        }
        .tag-badge:hover {
            transform: scale(1.05);
            opacity: 0.9;
        }
        .pagination .page-item.active .page-link {
            background-color: #0d6efd;
            border-color: #0d6efd;
        }
    </style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light bg-primary mb-4">
    <div class="container">
        <a class="navbar-brand text-white" href="#">广软课程论坛</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav me-auto">
                <li class="nav-item">
                    <a class="nav-link text-white" href="index.jsp">首页</a>
                </li>
            </ul>
            <form class="d-flex">
                <input class="form-control me-2" type="search" placeholder="搜索帖子">
                <button class="btn btn-outline-light" type="submit">搜索</button>
            </form>
            <ul class="navbar-nav ms-3">
                <li class="nav-item me-2">
                    <a class="nav-link text-white" href="#">登录</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-white" href="#">注册</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<!-- 主内容区 -->
<div class="container">
    <!-- 标签头部信息 -->
    <div class="tag-header">
        <h1 class="tag-title">
            <span class="badge bg-primary me-2">JavaEE</span>
            相关帖子
        </h1>
        <p class="tag-description">JavaEE 是企业级Java应用的开发平台，包含Servlet、JSP、EJB等技术，用于构建大型分布式系统。</p>
        <div class="tag-info">
            <div class="tag-info-item">
                <i class="bi bi-file-earmark-text"></i>
                <span>128 篇帖子</span>
            </div>
            <div class="tag-info-item">
                <i class="bi bi-people"></i>
                <span>56 位关注者</span>
            </div>
            <div class="tag-info-item">
                <i class="bi bi-calendar"></i>
                <span>创建于 2023-01-15</span>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <!-- 排序选项 -->
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h5>共找到 128 篇相关帖子</h5>
                <div class="dropdown">
                    <button class="btn btn-outline-secondary dropdown-toggle" type="button" id="sortDropdown" data-bs-toggle="dropdown">
                        <i class="bi bi-sort-down"></i> 按最新排序
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end">
                        <li><a class="dropdown-item" href="#">按最新排序</a></li>
                        <li><a class="dropdown-item" href="#">按最热排序</a></li>
                        <li><a class="dropdown-item" href="#">按评论数排序</a></li>
                    </ul>
                </div>
            </div>

            <!-- 帖子列表 -->
            <div class="post-list">
                <!-- 帖子卡片1 -->
                <div class="card post-card">
                    <a href="PostDetails.jsp">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <h5 class="card-title">
                                    <span class="badge bg-danger ms-2">置顶</span>
                                </h5>
                                <span class="text-muted small">
                                        <i class="bi bi-eye"></i> 999
                                    </span>
                            </div>
                            <h3>小白必看！JavaEE 学习秘籍大公开</h3>
                            <p>JavaEE 是企业级开发的关键技术，想学好它，要分阶段进行。首先，打好 Java 基础，掌握面向对象编程等核心知识。接着，学习 Servlet、JSP 等 JavaEE 核心技术，理解原理与应用场景。最后，多做项目实践，如小型 Web 应用。还可参考优质教程和开源项目，不断积累经验。</p>
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <img src="https://img0.baidu.com/it/u=3985150573,583103601&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500" alt="头像" class="avatar-sm me-2">
                                    <a href="/user/profile?id=1" class="text-decoration-none">Java导师</a>
                                    <span class="text-muted small ms-2">2023-06-10</span>
                                </div>
                                <div>
                                    <span class="badge bg-secondary me-2">Java基础</span>
                                    <span class="text-muted small">
                                            <i class="bi bi-chat-left-text"></i> 24
                                        </span>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>

                <!-- 帖子卡片2 -->
                <div class="card post-card">
                    <a href="PostDetails.jsp">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <h5 class="card-title"></h5>
                                <span class="text-muted small">
                                        <i class="bi bi-eye"></i> 456
                                    </span>
                            </div>
                            <h3>Servlet 工作原理深度解析</h3>
                            <p>Servlet 是 JavaEE 的核心组件之一，本文将从 Servlet 的生命周期、请求处理流程、线程安全等方面深入分析其工作原理，并通过实例演示如何编写高效的 Servlet 程序。适合已经掌握 JavaEE 基础的学习者进阶学习。</p>
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <img src="https://img1.baidu.com/it/u=3040230340,3888804140&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500" alt="头像" class="avatar-sm me-2">
                                    <a href="/user/profile?id=2" class="text-decoration-none">技术达人</a>
                                    <span class="text-muted small ms-2">2023-06-05</span>
                                </div>
                                <div>
                                    <span class="badge bg-secondary me-2">Servlet</span>
                                    <span class="text-muted small">
                                            <i class="bi bi-chat-left-text"></i> 18
                                        </span>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>

                <!-- 帖子卡片3 -->
                <div class="card post-card">
                    <a href="PostDetails.jsp">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <h5 class="card-title"></h5>
                                <span class="text-muted small">
                                        <i class="bi bi-eye"></i> 378
                                    </span>
                            </div>
                            <h3>JSP 与 Servlet 协作开发实战</h3>
                            <p>本文将通过一个完整的用户登录系统案例，演示如何结合 JSP 和 Servlet 进行 Web 开发。内容包括：JSP 页面设计、Servlet 控制器编写、数据传递方式、MVC 模式实现等。项目源码已上传 GitHub，可直接下载学习。</p>
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <img src="https://img2.baidu.com/it/u=1679184649,4248791580&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500" alt="头像" class="avatar-sm me-2">
                                    <a href="/user/profile?id=3" class="text-decoration-none">实战派</a>
                                    <span class="text-muted small ms-2">2023-05-28</span>
                                </div>
                                <div>
                                    <span class="badge bg-secondary me-2">实战案例</span>
                                    <span class="text-muted small">
                                            <i class="bi bi-chat-left-text"></i> 15
                                        </span>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>

                <!-- 帖子卡片4 -->
                <div class="card post-card">
                    <a href="PostDetails.jsp">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <h5 class="card-title"></h5>
                                <span class="text-muted small">
                                        <i class="bi bi-eye"></i> 289
                                    </span>
                            </div>
                            <h3>JavaEE 项目架构设计指南</h3>
                            <p>大型 JavaEE 项目如何设计合理的架构？本文将从分层设计、模块划分、技术选型、性能优化等方面，分享企业级项目的架构设计经验。特别适合即将参与大型项目开发的同学学习参考。</p>
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <img src="https://img0.baidu.com/it/u=2037849855,4211442434&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500" alt="头像" class="avatar-sm me-2">
                                    <a href="/user/profile?id=4" class="text-decoration-none">架构师</a>
                                    <span class="text-muted small ms-2">2023-05-20</span>
                                </div>
                                <div>
                                    <span class="badge bg-secondary me-2">架构设计</span>
                                    <span class="text-muted small">
                                            <i class="bi bi-chat-left-text"></i> 12
                                        </span>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>

            <!-- 分页 -->
            <nav aria-label="Page navigation" class="mt-4">
                <ul class="pagination justify-content-center">
                    <li class="page-item disabled">
                        <a class="page-link" href="#" tabindex="-1">上一页</a>
                    </li>
                    <li class="page-item active"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item">
                        <a class="page-link" href="#">下一页</a>
                    </li>
                </ul>
            </nav>
        </div>

        <!-- 侧边栏 -->
        <div class="col-lg-4">
            <!-- 相关标签 -->
            <div class="related-tags">
                <h5 class="mb-3">相关标签</h5>
                <div>
                    <a href="#" class="tag-badge" style="background-color: #e6f7ff; color: #1890ff;">Java基础</a>
                    <a href="#" class="tag-badge" style="background-color: #fff7e6; color: #fa8c16;">Servlet</a>
                    <a href="#" class="tag-badge" style="background-color: #f6ffed; color: #52c41a;">JSP</a>
                    <a href="#" class="tag-badge" style="background-color: #f9f0ff; color: #722ed1;">Spring</a>
                    <a href="#" class="tag-badge" style="background-color: #e6fffb; color: #13c2c2;">MyBatis</a>
                    <a href="#" class="tag-badge" style="background-color: #fff0f6; color: #eb2f96;">Maven</a>
                    <a href="#" class="tag-badge" style="background-color: #f0f5ff; color: #2f54eb;">Tomcat</a>
                    <a href="#" class="tag-badge" style="background-color: #fff2e8; color: #fa541c;">数据库</a>
                    <a href="#" class="tag-badge" style="background-color: #f0f8ff; color: #096dd9;">Web开发</a>
                </div>
            </div>

            <!-- 热门帖子 -->
            <div class="card mt-4">
                <div class="card-header bg-white">
                    <h5 class="mb-0">热门帖子</h5>
                </div>
                <div class="list-group list-group-flush">
                    <a href="#" class="list-group-item list-group-item-action">
                        <div class="d-flex justify-content-between">
                            <span>JavaEE 学习路线图</span>
                            <span class="text-muted small"><i class="bi bi-eye"></i> 1024</span>
                        </div>
                    </a>
                    <a href="#" class="list-group-item list-group-item-action">
                        <div class="d-flex justify-content-between">
                            <span>Servlet 面试题大全</span>
                            <span class="text-muted small"><i class="bi bi-eye"></i> 876</span>
                        </div>
                    </a>
                    <a href="#" class="list-group-item list-group-item-action">
                        <div class="d-flex justify-content-between">
                            <span>JSP 最佳实践</span>
                            <span class="text-muted small"><i class="bi bi-eye"></i> 765</span>
                        </div>
                    </a>
                    <a href="#" class="list-group-item list-group-item-action">
                        <div class="d-flex justify-content-between">
                            <span>JavaEE 项目实战</span>
                            <span class="text-muted small"><i class="bi bi-eye"></i> 654</span>
                        </div>
                    </a>
                    <a href="#" class="list-group-item list-group-item-action">
                        <div class="d-flex justify-content-between">
                            <span>企业级应用开发技巧</span>
                            <span class="text-muted small"><i class="bi bi-eye"></i> 543</span>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 页脚 -->
<footer class="bg-light py-4 mt-5">
    <div class="container text-center text-muted">
        <p>© 2023 广软课程论坛. 保留所有权利.</p>
    </div>
</footer>

<!-- Bootstrap 5 JS Bundle with Popper from jsDelivr CDN -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
